import 'dart:io';
import 'dart:ui';
import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:yuan_hang_app/res/w_dimens.dart';
import 'package:yuan_hang_app/utils/size_utils.dart';
import 'package:yuan_hang_app/widget/w_text.dart';

class PhotoView extends StatefulWidget {
  List? imgs;
  File? imgPath;
  String? url;
  String? asset;
  int currentIndex;

  PhotoView({
    super.key,
    this.url,
    this.imgs,
    this.imgPath,
    this.asset,
    this.currentIndex = 0,
  });

  @override
  State<StatefulWidget> createState() => PhotoViewState();
}

class PhotoViewState extends State<PhotoView> with TickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              Positioned(
                child: GestureDetector(
                  onTap: () {
                    Navigator.pop(context);
                  },
                  child: Container(
                    color: const Color(0x00000000),
                    alignment: Alignment.centerLeft,
                    width: 44.px,
                    height: 44.px + SizeUtils.statusBar(),
                    padding: EdgeInsets.only(
                        left: 18.px, top: SizeUtils.statusBar()),
                    child: Image.asset(
                      "images/_return.png",
                      height: 20.px,
                      color: Colors.white,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
              Offstage(
                offstage: null == widget.imgs,
                child: Container(
                  padding: EdgeInsets.only(top: SizeUtils.statusBar() + 10.px),
                  child: Align(
                    alignment: Alignment.topCenter,
                    child: WText(
                      '${widget.currentIndex + 1} / ${widget.imgs?.length}',
                      style: TextStyle(
                          fontSize: WDimens.tsLarge,
                          color: Colors.white,
                          decoration: TextDecoration.none),
                    ),
                  ),
                ),
              ),
            ],
          ),
          Expanded(
            child: ExtendedImageGesturePageView.builder(
              itemBuilder: (BuildContext context, int index) {
                Widget image;
                if (widget.imgs != null && widget.imgs!.isNotEmpty) {
                  if (widget.imgs![index].startsWith("http")) {
                    image = getNetworkImg(widget.imgs![index]);
                  } else if (widget.imgs![index].startsWith("images")) {
                    image = Image.asset(widget.imgs![index]);
                  } else {
                    image = Image.file(File(widget.imgs![index]));
                  }
                } else {
                  if (widget.imgPath != null) {
                    image = ExtendedImage.file(widget.imgPath!,
                        fit: BoxFit.contain, mode: ExtendedImageMode.gesture,
                        initGestureConfigHandler: (ExtendedImageState state) {
                      return GestureConfig(
                          inPageView: true,
                          initialScale: 1.0,
                          minScale: 1.0,
                          cacheGesture: false);
                    });
                  } else if (widget.url != null) {
                    image = getNetworkImg(widget.url);
                  } else if (widget.asset != null) {
                    image = ExtendedImage.asset(
                      widget.asset!,
                      fit: BoxFit.contain,
                      mode: ExtendedImageMode.gesture,
                      initGestureConfigHandler: (ExtendedImageState state) {
                        return GestureConfig(
                            inPageView: true,
                            initialScale: 1.0,
                            minScale: 1.0,
                            cacheGesture: false);
                      },
                    );
                  } else {
                    image = const SizedBox();
                  }
                }
                return Hero(
                  tag: index.toString(),
                  child: image,
                );
              },
              itemCount: widget.imgs != null && widget.imgs!.isNotEmpty
                  ? widget.imgs!.length
                  : 1,
              onPageChanged: (int index) {
                setState(() {
                  widget.currentIndex = index;
                });
              },
              controller: ExtendedPageController(
                initialPage: widget.currentIndex,
              ),
              scrollDirection: Axis.horizontal,
            ),
          ),
        ],
      ),
    );
  }

  Widget getNetworkImg(url) {
    return
      ExtendedImage.network(
      url,
      cache: true,
      fit: BoxFit.contain,
      mode: ExtendedImageMode.gesture,
      initGestureConfigHandler: (ExtendedImageState state) {
        return GestureConfig(
            inPageView: true,
            initialScale: 1.0,
            minScale: 1.0,
            cacheGesture: false);
      },
    );
  }

  @override
  void dispose() {
    clearGestureDetailsCache();
    super.dispose();
  }
}
